{extend name="../../admin/view/main"}

{block name="style"}{include file='singlepage/form-style'}{/block}

{block name='content'}
<style>
    .upload-image-box {
        width: 130px;
        height: 110px;
        border: 1px solid rgba(125, 125, 125, .1);
        background-size: cover;
    }
    .upload-file-box {
        width: 80px;
        height: 50px;
        border: 1px solid rgba(125, 125, 125, .1);
        background-size: cover;
    }


</style>
<div id="ArticlesEditor" class="layui-clear nowrap padding-bottom-30">
    <div class="layui-card news-right">
        <div class="layui-card-body">
            <!--<form onsubmit="return false" data-auto="true" action="{:request()->url()}" method="post" class='layui-form layui-card' autocomplete="off">-->
            <form class="layui-form padding-20" role="form" name="articles" onsubmit="return false">
                    <div class="layui-input-inline label-required-prev">
                        <span class="layui-form-item color-green">栏目名称</span>
                        <select class="layui-select" name="category_id" lay-filter="demo" lay-verify="required"  ng-model="item.category_id">
                            <option value="" disabled>-- 全部 --</option>
                            {foreach $clist as $k=>$v}
                                {if $v.disable==true }
                                <option disabled value="{$v.id}">{$v.spl|raw}{$v.title}</option>
                                {else}
                                <option value="{$v.id}" >{$v.spl|raw}{$v.title}</option>
                                 {/if}
                            {/foreach}
                        </select>
                    </div>

                <label class="layui-form-item relative block">
                    <span class="color-green">文章标题</span>
                    <input maxlength="64" ng-model="item.title" required placeholder="请在这里输入标题" name='title' class="layui-input">
                </label>
                <label class="layui-form-item relative block">
                    <span class="color-green">文章作者</span>
                    <input maxlength="64" ng-model="item.author" required placeholder="请输入文章作者" name='author' class="layui-input">
                </label>
                <div name="thumb-box" class="layui-form-item label-required-prev">
                    <span class="color-green">图文封面大图片</span>
                    <div class="layui-clear">
                        <div class="upload-image-box pull-left transition" data-tips-image="{{item.thumb}}" style="{{item.style}}">
                            <input ng-model="item.thumb" data-auto-none value="{{item.thumb}}" type="hidden" name="thumb">
                        </div>
                        <div class="pull-left padding-top-15 padding-left-15">
                            <button type="button" data-title="上传图片" data-file="btn" data-type="jpg,png,jpeg" data-field="thumb" class="layui-btn layui-btn-sm layui-btn-primary">上传图片</button>
                        </div>
                    </div>
                    <p class="color-desc">封面大图片建议尺寸 900像素 * 500像素</p>
                </div>
                <div class="layui-form-item label-required-prev">
                    <span class="color-green">图文文章内容</span>
                    <textarea ng-model="item.content" name='content'></textarea>
                </div>
                <label class="layui-form-item relative block">
                    <span class="help-block">摘要选填，如果不填写会默认抓取正文前54个字</span>
                    <textarea ng-model="item.digest" name="digest" class="layui-textarea" style="height:80px;line-height:18px"></textarea>
                </label>
<!--上传附件-->
                <style>
                    #annex-box{clear:both;height:40px;margin-top:10px;}
                    #annex-box .item{margin-right:20px;float:left;width:230px;position: relative;border:1px dashed #ccc;padding:4px 10px;}
                    #annex-box .fa-trash{position:absolute;right:-5px;top:-10px;cursor: pointer;}
                </style>
                <div name="annex-box" class="layui-form-item label-required-prev">
                    <span class="color-green">附件信息</span>
                    <div class="layui-clear">
                        <div id="annex-box">
                            <!-- 这里放一些上传图片的内容 -->
                        </div>
                        <div class="pull-left padding-top-15 padding-left-15">
                            <input ng-model="item.annex" type="hidden" name="annex" value="" />
                            <input ng-model="item.annex_list" type="hidden" name="annex_list" value="" />
                            <button type="button" data-title="上传文件" data-file="btn"  data-field="annex_list" class="layui-btn layui-btn-sm layui-btn-primary">上传文件</button>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item text-center padding-top-30">
                    <input ng-model="x.read_num" type="hidden">
                    <button ng-click="submit()" type="button" class="layui-btn">保存信息</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div name="annex-template" style="display: none;">
    <div class="item" file="__URL__">
        <a target="_blank" href="__URL__">__TITLE__</a>
        <span class="font-s20 fa fa-trash"></span>
    </div>
</div>
{/block}


{block name='script'}
<script>window.form.render()</script>
<script>

        require(['angular', 'ckeditor'], function () {

            /*layui.use(['form'], function () {
                var form = layui.form;
            });*/

        var editor;
        var $form = $('form[name="articles"]');
        var $vali = $form.vali().data('validate');

        var app = angular.module("ArticlesEditor", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);

        function callback($rootScope) {
            $rootScope.list = [];
            $rootScope.item = {};
            $.form.load('{:request()->url()}', {output: 'json'}, 'get', function (ret) {
                console.log(typeof ret);
                console.log(ret);
                return $rootScope.$apply(function () {
                    apply(ret.data || {});
                }), false;
            });
                function apply(article) {
                    console.log(article);
                    if(article.id==undefined) article = {
                        title: '新建图文', author: '管理员', content: '文章内容',category_id:0,
                        read_num: 0, thumb: '__ROOT__/static/theme/img/image.png',annex:  '',
                    };
                    $("select[name=category_id]").val(article.category_id);
                    if(article.annex) {
                        var annex = article.annex.split(",");
                        for (var i = 0; i < annex.length; i++) {
                            setAnnex(annex[i]);
                        }
                    }

                    window.form.render();
                    layui.use(['layer', 'jquery', 'form'], function () {
                        var layer = layui.layer,
                            $ = layui.jquery,
                            form = layui.form;
                        form.on('select(demo)', function(data){
                            if(data.value >0){
                                $("#searchSessionNum").attr("disabled","true");
                                $("select[name=category_id]").val();
                                $rootScope.item.category_id= data.value;
                                window.form.render('select');
                            }else{

                                $("#searchSessionNum").removeAttr("disabled");
                                window.form.render('select');//select是固定写法 不是选择器
                            }
                        });
                    });
                    window.form.render('select');
                    $rootScope.item = article;
                    $rootScope.item.style = "background-file:url('" + $rootScope.item.annex + "')";
                    $rootScope.item.style = "background-image:url('" + $rootScope.item.thumb + "')";
                    if($rootScope.item.type=='infolist') $("div[name=thumb-box]").hide();
                    $('.layui-card-body.layui-hide').removeClass('layui-hide');
                    setTimeout(function () {
                        if (editor) editor.destroy();
                        editor = window.createEditor('[name="content"]');
                        editor.setData($rootScope.item.content);
                        $vali.checkAllInput();
                    }, 100);
                }
            $rootScope.setItemValue = function (name, value) {
                $rootScope.item[name] = value;
                $rootScope.item.style = "background-image:url('" + $rootScope.item.thumb + "')";
            };

            $rootScope.setItemValuel = function (name, value) {
                $rootScope.item[name] = value;
                $rootScope.item.style = "background-file:url('" + $rootScope.item.annex + "')";

            };

            $rootScope.upItem = function (index, $event) {
                $event.stopPropagation();
                var tmp = [], cur = $rootScope.list[index];
                if (index < 1) return false;
                for (var i in $rootScope.list) {
                    (parseInt(i) === parseInt(index) - 1) && tmp.push(cur);
                    (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.list[i]);
                }
                apply(tmp);
            };
            $rootScope.dnItem = function (index, $event) {
                $event.stopPropagation();
                var tmp = [], cur = $rootScope.list[index];
                if (index > $rootScope.list.length - 2) return false;
                for (var i in $rootScope.list) {
                    (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.list[i]);
                    (parseInt(i) === parseInt(index) + 1) && tmp.push(cur);
                }
                apply(tmp);
            };
            $rootScope.delItem = function (index, $event) {
                $event.stopPropagation();
                var list = $rootScope.list, temp = [];
                for (var i in list) (parseInt(i) !== parseInt(index)) && temp.push(list[i]);
                apply(temp);
            };
            $rootScope.submit = function () {
                $vali.checkAllInput();
                if ($form.find('.validate-error').size() > 0) {
                    return $.msg.tips('表单验证不成功，请输入需要的内容！');
                }
                if ($rootScope.item.category_id <1) {
                    return $.msg.tips('栏目名称不能为空！');
                }
                $rootScope.item.content = editor.getData();
                var data = {
                    id: $rootScope.item.id,
                    title: $rootScope.item.title,
                    author: $rootScope.item.author,
                    digest: $rootScope.item.digest,
                    content: $rootScope.item.content,
                    read_num: $rootScope.item.read_num,
                    thumb: $rootScope.item.thumb,
                    category_id:$rootScope.item.category_id,
                    annex:$rootScope.item.annex,
                };
                $.form.load('{:request()->url()}', {data: data}, "post");
            };
            $('[name="thumb"]').on('change', function (value) {
                value = this.value;
                $rootScope.$apply(function () {
                    $rootScope.setItemValue('thumb', value);
                });
            });
            $('[name="annex_list"]').on('change', function (value) {
                setAnnex(this.value);
            });

            layui.use('layer', function () {
                var $ = layui.jquery;
                $(document).on('click', '.fa-trash', function () {
                    $(this).parent().remove();
                    setAnnexList();
                });
            });
            function setAnnex(value) {
                var html = $("div[name=annex-template]").html();
                html = html.replace(/__URL__/g, value);
                html = html.replace("__TITLE__", value.substring(value.lastIndexOf("/")+1,value.length));
                $("#annex-box").append(html);
                setAnnexList();
            }
            function setAnnexList() {
                var annex = new Array();
                $("#annex-box .item").each(function () {
                    annex.push($(this).attr("file"));
                });
                $rootScope.setItemValue("annex", annex.join(","));
            }
        }

    });
</script>




{/block}